{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "manage/manage_base.html" %}
{% set user = request.user %}
{% set title = gettext("Use a recovery code") %}
{% set active_tab = "account" %}
{% block title %}{{ title }}{% endblock %}
{# Hide mobile search on manager pages #}
{% block mobile_search %}{% endblock %}
{% block content %}
  <div class="horizontal-section">
    <div class="site-container">
      <div class="col-grid">
        <div class="col-half">
          <h1 class="page-title page-title--wsubtitle heading-wsubtitle__heading">{{ title }}</h1>
          <p>
            {% trans %}
            In order to verify that you have safely stored your recovery codes for use in the event of a lost 2FA device, submit one of your recovery codes here.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          The recovery code you choose will be considered used and no longer be available to bypass 2FA.
        {% endtrans %}
      </p>
      <p>
        {% trans %}
        <strong>Forgot to safely store your recovery codes?</strong> You'll need to generate them again.
      {% endtrans %}
    </p>
    <a href="{{ request.route_path('manage.account.recovery-codes.regenerate') }}"
       class="button button--secondary">{% trans %}Regenerate{% endtrans %}</a>
  </div>
  <div class="col-half">
    <form method="post" action="{{ request.current_route_path() }}">
      <input name="csrf_token"
             type="hidden"
             value="{{ request.session.get_csrf_token() }}">
      <input name="method" type="hidden" value="recovery-code">
      {% if form.form_errors %}
        <ul class="form-errors" role="alert">
          {% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
        </ul>
      {% endif %}
      <div class="form-group">
        <label for="recovery_code_value" class="form-group__label">
          {% trans %}Enter recovery code{% endtrans %}
          {% if form.recovery_code_value.flags.required %}
            <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
          {% endif %}
        </label>
        {{ form.recovery_code_value(autocapitalize="off",
                spellcheck="false",
                required="required",
                class_="form-group__field",
                autocomplete="one-time-code",
                aria_describedby="recovery_code-errors",) }}
        {% if form.recovery_code_value.errors %}
          <ul id="recovery_code-errors" class="form-errors" role="alert">
            {% for error in form.recovery_code_value.errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
      </div>
      <div class="form-group">
        <input type="submit"
               value="{% trans %}Verify{% endtrans %}"
               class="button button--primary">
      </div>
    </form>
  </div>
</div>
</div>
</div>
{% endblock %}
